<template>
  <div style="background-color: rgb(242, 242, 242)">
    <homeHead :showLeft="true" name="我的推荐"></homeHead>
    <div class="list-header">
      <mt-loadmore
        :bottom-method="loadBottom"
        :auto-fill="false"
        :bottom-all-loaded="allLoaded"
        ref="loadmore"
      >
        <list :items="listData2" :infoType="infoType"></list>
      </mt-loadmore>
      <p v-if="allLoaded == true" style="text-align: center">暂无更多数据</p>
      <p v-else style="text-align: center">上拉加载更多</p>
    </div>
  </div>
</template>

<script>
import homeHead from "./head.vue";
import list from "./reCommendList.vue";
import { getRecommendList } from "../../api/mine";

export default {
  components: {
    homeHead,
    list,
  },
  data() {
    return {
      allLoaded: false,
      infoType:"MyRecommendation",
      allPage: "",
      listData: [],
      listData2:[],
      postData: {
        pageIndex: 1,
        pageSize: 12,
        infoType: "MyRecommendation",
      },
    };
  },
  mounted() {
    this.getList();
  },

  methods: {
    // 货取我的收藏数据列表
    getList() {
      getRecommendList(this.postData).then((res) => {
        this.listData = JSON.parse(res.data.data);
        this.listData2=this.listData2.concat(this.listData);
        // 总条数
         var total = res.data.DataCount;
        // 总页数
        this.allPage = Math.ceil(total / this.postData.pageSize);
        if (this.postData.pageIndex <this.allPage) {
          //可以上拉
          this.allLoaded = false;
        } else {
          //控制是否可以滑动
          this.allLoaded = true;
        }
      });
    },
    // 上拉刷新
    loadBottom() {
      if (this.postData.pageIndex <this.allPage) {
        this.postData.pageIndex += 1;
        this.getList();
        this.$refs.loadmore.onBottomLoaded();
      }
    },
    // 下拉刷新
    loadTop() {
      this.$refs.loadmore.onTopLoaded();
      //排除小于0
      if (this.postData.pageIndex >= 2) {
        this.postData.pageIndex -= 1;
        this.getList();
      } else {
        this.postData.pageIndex = 1;
        this.getList();
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.list-header { 
  min-height: calc(100vh - 40px);
  background: #fff;
  overflow-x: hidden;
  margin-top: 60px;
}
</style>